<template>
  <el-card
    class="box-card"
    shadow="never"
    style="width: 100%"
    :style="{ height: height + 'px' }"
  >
    <div class="chart-box" ref="pie" :style="{ height: height + 'px' }"></div>
  </el-card>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'EchartView',
  props: {
    height: {
      type: Number,
      default: 400
    },
    data: {
      type: Array,
      required: true
    }
  },
  data () {
    return {}
  },
  methods: {},
  mounted () {
    const myChart = echarts.init(this.$refs.pie)
    const option = {
      title: {
        text: '性别分布情况',
        textStyle: {
          color: '#6c757d',
          fontSize: '16px'
        }
      },
      series: [
        {
          name: '性别分布',
          type: 'pie',
          radius: ['60%', '75%'],
          center: ['50%', '55%'],
          labelLine: {
            show: false
          },
          data: this.data
        }
      ]
    }
    myChart.setOption(option)
  }
}
</script>

<style lang="less" scoped></style>
